<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: 刘世琪
 * @Date: 2021-03-04 11:09:11
 * @LastEditors: Seven
 * @LastEditTime: 2021-03-15 11:51:24
-->
<template>
    <div>
         <!-- 头部区域 -->
        <!-- <Header></Header> -->
        <!-- 头部区域 -->
        <div class="udlite-container partners">
            <a-tabs defaultActiveKey="1" @change="callback">
                <a-tab-pane tab="用户名登陆" key="1">
                    <a-form-item label="用户名" v-bind="formlayout">
                        <a-input v-model="username" placeholder="请输入您的用户名"/>
                    </a-form-item>
                    <!-- <a-form-item label="密码" v-bind="formlayout">
                        <a-input-password v-model="password" placeholder="请输入您的密码" />
                    </a-form-item> -->
                </a-tab-pane>
                <a-tab-pane tab="手机号登陆" key="2" forceRender>
                     <a-form-item label="手机号" v-bind="formlayout">
                        <a-input v-model="phone" placeholder="请输入您的手机"/>
                    </a-form-item>
                    <!-- <a-form-item label="密码" v-bind="formlayout">
                        <a-input-password v-model="password" placeholder="请输入您的密码" />
                    </a-form-item> -->
                </a-tab-pane>
                <a-tab-pane tab="邮箱登陆" key="3">
                    <a-form-item label="邮箱" v-bind="formlayout">
                        <a-input v-model="email" placeholder="请输入您的邮箱"/>
                    </a-form-item>
                    <!-- <a-form-item label="密码" v-bind="formlayout">
                        <a-input-password v-model="password" placeholder="请输入您的密码" />
                    </a-form-item> -->
                </a-tab-pane>
            </a-tabs>
        </div>
             <a-form-item label="密码" v-bind="formlayout">
                        <a-input-password v-model="password" placeholder="请输入您的密码" />
                    </a-form-item>
             <!-- 图片验证码 -->
            <a-form-item label="验证码" v-bind="formlayout">
                <a-input v-model="code" placeholder="请输入验证码" />
                <img :src="src" @click="changecode" width="300">
            </a-form-item>
              <!-- 滑块验证 -->
               <!-- <br>
              <van-cell-group>
                  <drag-verify :width="width" :height="height" :text="text" ref="Verify">
                  </drag-verify>  
              </van-cell-group> -->
              <br>
              
            <a-form-item v-bind="buttonlayout">
                <a-button type="primary"  @click="submit(key)">登 录</a-button>
                <a-button type="primary"  @click="empty">重 置</a-button>
            </a-form-item>
        
            <!-- 尾部区域 -->
            <!-- <Footer></Footer> -->
            <!-- 尾部区域 -->
            
    </div>
</template>

<script>
// import Header from './Header.vue'
// import Footer from './Footer.vue'
import axios from 'axios'
// 滑块组件
// import dragVerify from 'vue-drag-verify'
export default {
    components:{
        // 'Header':Header,
        // 'Footer':Footer,
        // 'dragVerify':dragVerify
    },
    data() {
        return {
            username:"",
            password:"",
            email:'',
            phone:"",
            key:1,
            count:null,
            code:'',
            token:localStorage.getItem('token'),
            src:'http://127.0.0.1:8000/my_code/',
            base_url:"http://127.0.0.1:8000/",
            //表单样式
            formlayout:{
                //标签
                labelCol:{
                    xs:{span:24},
                    sm:{span:8}
                },
                //文本框
                wrapperCol:{
                    xs:{span:14},
                    sm:{span:6}
                }
            },
            //按钮样式
            buttonlayout:{
                // 按钮
                wrapperCol:{
                    xs:{
                        span:24,
                        offset:0 
                    },
                    sm:{span:16,offset:8}
                }
            }
        }
    },
    methods: {
        // 获取验证码
        changecode(){
            var num = Math.ceil(Math.random()*10);
            this.src = this.src + "?num=" + num
        },
        callback (key) {
            console.log(key)
            this.key = key
            this.count = key
        },
        submit:function(key){
            // if(key==1){
            //     if(this.username==''){
            //         this.$message.info('用户名不能为空')
            //         return false
            //     } 
            // }
            // if(key==2){
            //     if(this.phone==''){
            //         this.$message.info('手机号不能为空')
            //         return false
            //     }
            // }
            // if(key==3){
            //     if(this.email==''){
            //         this.$message.info('邮箱不能为空')
            //         return false
            //     }
            // }
            if(this.username=="" & this.email=="" & this.phone==""){
                alert("不可为空")
                return
            }
             if(this.password==''){
                this.$message.info('密码不能为空')
                return false
            }
            if(this.code==''){
                this.$message.info('验证码不能为空')
                return false
            }
            else{
                var formdata={
                    'username':this.username,
                    'password':this.password,
                    'email':this.email,
                    'phone':this.phone,
                    // 'email':this.username,
                    // 'phone':this.username,
                    'active':key,
                    'code':this.code
                }
                axios({
                    url:this.base_url + 'admin_login/',
                    method:'post',
                    data:formdata
                }).then(resp=>{
                    console.log(resp.data)
                    console.log(this.username,
                                this.email,
                                // this.phone,
                                this.code    
                    )
                    if(resp.data.code==200){
                        localStorage.setItem('username',this.username)
                        localStorage.setItem('email',resp.data.email)
                        localStorage.setItem('phone',resp.data.phone)
                        localStorage.setItem('token',resp.data.token)
                        localStorage.setItem('uid',resp.data.uid)
                        this.$router.push({
                            name:'Indexs'
                        })
                    }else{
                        this.$message.info(resp.data.msg)
                    }
                })
            }
        },
        // 重置
        empty(){
            this.username = '',
            this.password = '',
            this.code = ''
        },
    },
    created() {
        
    }
}
</script>

<style>
img{
    /* 改变鼠标样式 pointer(可点击样式)*/
    cursor:pointer;
}
</style>
